<template>
	<view :style="{height:shh+'px'}"></view>
	<view class="height50px flex-ju-c bgededed">
		<input @input="sousou" class="bgfff con height35px ra10 center" placeholder="搜索" />
	</view>
	<scroll-view class="list-wrap" scroll-y @scroll="scrollListener">
		<!-- 虚拟列表所有项的高度 -->
		<view class="scroll-bar" :style="{height:bheight}"></view>
		<!-- 虚拟列表项 -->
		<view class="list" :style="{top:top}">
			<uni-list :border="true">
				<template v-for="(item,index) in showList" :key="index">
					<uni-list-chat to="detail" :title="item.name" :avatar-list="avatarList" :note="item.msg"
						time="2020-02-02 20:20" badge-positon="left" badge-text="dot">
						<view class="chat-custom-right">
							<text class="chat-custom-text">{{item.times}}</text>
							<!-- 需要使用 uni-icons 请自行引入 -->
							<!-- <uni-icons type="star-filled" color="#999" size="18"></uni-icons> -->
						</view>
					</uni-list-chat>
				</template>
			</uni-list>
		</view>

	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				inputvalue: "",
				wheight: "",
				bheight: "",
				top: "",
				list: [1], // 超长的显示数据
				itemHeight: 67, // 每一列的高度
				showNum: 15, // 显示几条数据
				start: 0, // 滚动过程显示的开始索引
				end: 10, // 滚动过程显示的结束索引
				avatarList: [{
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
				}],
			}
		},

		onLoad() {
			console.log(this.list.length)
			if (!uni.getStorageSync('user').token) {
				uni.reLaunch({
					url: "/pages/login"
				})
			}

			uni.onPushMessage((res) => {
				// uni.showModal({
				// 	content:JSON.stringify(res.data.payload)
				// })
					
					console.log(res)
				if (res.data.payload.type == 'add') {
					this.addmsg(res)
				} else if (res.data.payload.type == 'friend') {
					console.log(res.data.payload.user)
					
					
					
					if (uni.getStorageSync('friend')) {

						var fares = uni.getStorageSync('friend')
						fares.unshift(res.data.payload.user)
						uni.setStorageSync('friend', fares)

					} else {
						uni.setStorageSync('friend', [res.data.payload.user])
					}

				}

			})

		},
		computed: {

			showList() {
				return this.list.slice(this.start, this.end);
			}
		},
		mounted() {
			this.wheight = this.itemHeight * this.showNum + 'px';
			this.bheight = this.itemHeight * this.list.length + 'px';

			var fares = uni.getStorageSync('friend')
			this.list = fares

		},
		methods: {
			addmsg(res) {
				var page = getCurrentPages()
				var pages = page[page.length - 1].route
				var oob = res.data.payload.user
				oob.isadd = false
				oob.iscount = 1
				oob.istabbar = 1
				if (uni.getStorageSync('adduser')) {
					var ares = uni.getStorageSync('adduser')
					ares.unshift(oob)
					var count = 0
					ares.map(item => {
						if (item.istabbar == 1) {
							count++
						}
					})

					uni.setStorageSync('adduser', ares)
					if (pages == 'pages/user/index' || pages == 'pages/index/index' || pages == 'pages/tong/index') {
						uni.setTabBarBadge({
							index: 1,
							text: count
						})
					}

				} else {
					uni.setStorageSync('adduser', [oob])
					if (pages == 'pages/user/index' || pages == 'pages/index/index' || pages == 'pages/tong/index') {
						uni.setTabBarBadge({
							index: 1,
							text: 1
						})
					}

				}
			},
			sousou(e) {
				this.inputvalue = e.detail.value

			},
			scrollListener(e) {
				let scrollTop = e.detail.scrollTop
				this.start = Math.floor(scrollTop / this.itemHeight);
				this.end = this.start + this.showNum;
				this.top = this.start * this.itemHeight + 'px';
			}
		}
	}
</script>

<style lang="scss">
	.list {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		list-style: none;
	}

	.list-wrap {
		height: calc(100vh - 50px);
	}
</style>